import*as t from"../helpers/helpers.js";import*as e from"../../lit-html/lit-html.js";import*as o from"../render_coordinator/render_coordinator.js";const i=new CSSStyleSheet;i.replaceSync(":host{display:inline-block;white-space:nowrap;position:relative}@media (forced-colors: active){.icon-basic{forced-color-adjust:none}}\n/*# sourceURL=icon.css */\n");const n=t=>void 0!==t,a=o.RenderCoordinator.RenderCoordinator.instance();class c extends HTMLElement{static litTagName=e.literal`devtools-icon`;#t=this.attachShadow({mode:"open"});#e="";#o="rgb(110 110 110)";#i="100%";#n="100%";#a;connectedCallback(){this.#t.adoptedStyleSheets=[i]}set data(t){const{width:e,height:o}=t;if(this.#o=t.color,this.#i=n(e)?e:n(o)?o:this.#i,this.#n=n(o)?o:n(e)?e:this.#n,"iconPath"in t&&t.iconPath)this.#e=t.iconPath;else{if(!("iconName"in t)||!t.iconName)throw new Error("Misconfigured iconName or iconPath.");this.#e=new URL(`../../../Images/${t.iconName}.svg`,import.meta.url).toString(),this.#a=t.iconName}this.#c()}get data(){const t={color:this.#o,width:this.#i,height:this.#n};return this.#a?{...t,iconName:this.#a}:{...t,iconPath:this.#e}}#r(){const t=this.#e,e=this.#i,o=this.#n,i=this.#o,n={width:e,height:o,display:"block"};return i?{...n,webkitMaskImage:`url(${t})`,webkitMaskPosition:"center",webkitMaskRepeat:"no-repeat",webkitMaskSize:"99%",backgroundColor:`var(--icon-color, ${i})`}:{...n,backgroundImage:`url(${t})`,backgroundPosition:"center",backgroundRepeat:"no-repeat",backgroundSize:"99%"}}#c(){a.write((()=>{e.render(e.html` <div class="icon-basic" style="${e.Directives.styleMap(this.#r())}"></div> `,this.#t,{host:this})}))}}t.CustomElements.defineComponent("devtools-icon",c);var r=Object.freeze({__proto__:null,Icon:c});const s=new CSSStyleSheet;s.replaceSync(":host{white-space:normal;display:inline-block}.icon-button{border:none;margin-right:2px;display:inline-flex;align-items:center;color:inherit;font-size:inherit;font-family:inherit;background-color:var(--color-background-elevation-1)}.icon-button.with-click-handler{border:1px solid var(--color-details-hairline);border-radius:2px;padding:0 4px}.icon-button.with-click-handler:hover{background-color:var(--legacy-toolbar-hover-bg-color)}.icon-button.icon-button.with-click-handler:active{background-color:var(--color-background-elevation-1)}.icon-button:focus-visible{background-color:var(--legacy-toolbar-hover-bg-color);border:1px solid var(--color-details-hairline)}.icon-button-title{margin-left:0.5ex}.compact .icon-button-title{display:none}.status-icon{margin-left:1ex}.status-icon:first-child{margin-left:inherit}@media (forced-colors: active){.icon-button{forced-color-adjust:none;background-color:ButtonFace}.icon-button:focus-visible,\n  .icon-button.with-click-handler:hover{background-color:Highlight;color:HighlightText;--icon-color:HighlightText}}\n/*# sourceURL=iconButton.css */\n");class l extends HTMLElement{static litTagName=e.literal`icon-button`;#t=this.attachShadow({mode:"open"});#s=void 0;#l=[];#h=!1;#d="";#p="";#m;set data(t){this.#l=t.groups.map((t=>({...t}))),this.#s=t.clickHandler,this.#p=t.trailingText??"",this.#d=t.leadingText??"",this.#m=t.accessibleName,this.#h=Boolean(t.compact),this.#c()}get data(){return{groups:this.#l.map((t=>({...t}))),accessibleName:this.#m,clickHandler:this.#s,leadingText:this.#d,trailingText:this.#p,compact:this.#h}}connectedCallback(){this.#t.adoptedStyleSheets=[s]}#g(t){this.#s&&(t.preventDefault(),this.#s())}#c(){const t=e.Directives.classMap({"icon-button":!0,"with-click-handler":Boolean(this.#s),compact:this.#h}),o=this.#l.filter((t=>void 0!==t.text)).filter(((t,e)=>!this.#h||0===e));e.render(e.html` <button class="${t}" @click="${this.#g}" aria-label="${e.Directives.ifDefined(this.#m)}"> ${!this.#h&&this.#d?e.html`<span class="icon-button-title">${this.#d}</span>`:e.nothing} ${o.map((t=>e.html` <${c.litTagName} class="status-icon" .data="${{iconName:t.iconName,color:t.iconColor,width:t.iconWidth||"1.5ex",height:t.iconHeight||"1.5ex"}}"> </${c.litTagName}> ${this.#h?e.html`<span>​</span>`:e.nothing} <span class="icon-button-title">${t.text}</span> `))} ${!this.#h&&this.#p?e.html`<span class="icon-button-title">${this.#p}</span>`:e.nothing} </button>`,this.#t,{host:this})}}t.CustomElements.defineComponent("icon-button",l);var h=Object.freeze({__proto__:null,IconButton:l});const d=new CSSStyleSheet;d.replaceSync(":host{display:inline-block;width:20px;height:20px}span{display:block;width:100%;height:100%;white-space:nowrap;background-color:currentColor;-webkit-mask-position:center;-webkit-mask-repeat:no-repeat;-webkit-mask-size:99%}\n/*# sourceURL=newIcon.css */\n");var p=self&&self.__decorate||function(t,e,o,i){var n,a=arguments.length,c=a<3?e:null===i?i=Object.getOwnPropertyDescriptor(e,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)c=Reflect.decorate(t,e,o,i);else for(var r=t.length-1;r>=0;r--)(n=t[r])&&(c=(a<3?n(c):a>3?n(e,o,c):n(e,o))||c);return a>3&&c&&Object.defineProperty(e,o,c),c};class m extends e.LitElement{name="";static get styles(){return[d]}render(){const t={webkitMaskImage:`url(${this.pathFromName(this.name)})`};return e.html`<span style="${e.Directives.styleMap(t)}"></span>`}pathFromName(t){return new URL(`../../../Images/${t}.svg`,import.meta.url).toString()}}p([e.Decorators.property({type:String})],m.prototype,"name",void 0),t.CustomElements.defineComponent("devtools-new-icon",m);var g=Object.freeze({__proto__:null,NewIcon:m});export{r as Icon,h as IconButton,g as NewIcon};
